<template>
  <div class="bind">
    <div class="bind_content">
      <div class="bind_input">
        <label for="game-id">游戏ID：</label>
        <input id="game-id" type="number" v-model="gameId">
      </div>
      <agent-button class="bind_btn" :disabled="(!gameId.length > 0)" @btnClick="bindClick">确认绑定</agent-button>
    </div>
    <p class="bind_tips">备注:所有加赠房卡均由官方赠出，不扣除代理商房卡</p>
  </div>
</template>

<script>
import { XInput } from "vux";
import AgentButton from "../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      gameId: "",
      userInfo: ""
    };
  },
  components: {
    XInput,
    AgentButton
  },
  created() {
    this.userInfo = this.apiService.getLocalData("userInfo");
  },
  methods: {
    bindClick() {
      let _this = this;
      this.apiService.user
        .getplayerinfo({
          playerid: this.gameId
        })
        .then(res => {
          this.$vux.confirm.show({
            title: "绑定游戏ID",
            content: `你确定绑定${res.data.nick}吗？`,
            onConfirm() {
              _this.apiService.user
                .addplayid({
                  playid: _this.gameId
                })
                .then(res => {
                  _this.userInfo["play_id"] = _this.gameId;
                  _this.apiService.setLocalData("userInfo", _this.userInfo);
                  _this.$router.go(-1);
                });
            }
          });
        });
    }
  }
};
</script>
<style scoped>
.bind {
  background-color: #f5f5f5;
  padding-top: 0.25rem;
  text-align: center;
}
.bind_content {
  background-color: #fff;
  padding: 0.35rem 0;
}
.bind_input {
  margin: 0.65rem 0;
}
.bind_input input {
  border: 0.01rem solid gray;
  height: 0.6rem;
  font-size: 0.3rem;
  padding-left: 0.2rem;
}

.bind_tips {
  color: #cc422e;
  font-size: 0.3rem;
  margin-top: 0.2rem;
}
</style>


